<template>
  <div>
    <div class="logo">
      <a-icon type="schedule" style="margin-right: 8px;"/>
      <span v-if="!collapsed">评测管理系统</span>
    </div>
    <div style="border-bottom: 1px solid #747474;"></div>
    <a-menu theme="dark" mode="inline" :selectedKeys="selectedKeys" @click="handleClick">
      <main-sider-item v-for="menus in menuList" :key="menus.id" :menus="menus"/>
    </a-menu>
  </div>
</template>

<script>
import mainSiderItem from './main-sider-item'

export default {
  name: "main-sider",
  props: ['collapsed', 'menuList'],
  components: {
    mainSiderItem
  },
  data () {
    return {
      selectedKeys: [],
    }
  },
  create() {
  },
  methods: {
    handleClick(e) {
      this.current = e.key;
    },
  }
}
</script>

<style lang="less" scoped>
.logo {
  //height: 32px;
  //background: rgba(255, 255, 255, 0.2);
  color: #f0f0f0;
  font-size: 21px;
  margin: 16px;
}
</style>
